<template>
  <el-container>
    <el-header class="login-one">
        <br>
        <el-row>
            <el-col :span="8">
             <span style="color:white">在线考试系统</span>
            </el-col>
            <el-col :span="8">&nbsp;</el-col>
            <el-col :span="8" align="right">
                <el-button type="success" icon="el-icon-setting" size="mini">修改密码</el-button>
                <el-button type="success" icon="el-icon-remove" size="mini" @click="handleLogout">退出登录</el-button>
                <el-button type="success" icon="el-icon-user-solid" size="mini">{{name}}</el-button>
            </el-col>
        </el-row>
    </el-header>
    <el-container>
      <el-aside width="240px">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
          @select="handleSelect">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>系统管理</span>
              </template>
                <el-menu-item index="/index/default">
                  <i class="el-icon-s-home"></i>
                  <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="/index/list">
                  <i class="el-icon-document"></i>
                  <span slot="title">员工管理</span>
                </el-menu-item>

              <el-menu-item index="/index/file">
                <i class="el-icon-folder"></i>
                <span slot="title">文件</span>
              </el-menu-item>

              <el-menu-item index="/index/register">
                <i class="el-icon-user"></i>
                <span slot="title">注册</span>
              </el-menu-item>

              <!-- 添加考勤管理菜单 -->
              <el-menu-item index="/index/attendance">
                <i class="el-icon-date"></i>
                <span slot="title">考勤管理</span>
              </el-menu-item>

              <!-- 添加员工调动管理菜单 -->
              <el-menu-item index="/index/transfer">
                <i class="el-icon-refresh"></i>
                <span slot="title">员工调动</span>
              </el-menu-item>

              <!-- 添加面试记录管理菜单 -->
              <el-menu-item index="/index/interview">
                <i class="el-icon-document-checked"></i>
                <span slot="title">面试记录</span>
              </el-menu-item>

              <!-- 添加招聘记录管理菜单 -->
              <el-menu-item index="/index/recruitment">
                <i class="el-icon-user-solid"></i>
                <span slot="title">招聘管理</span>
              </el-menu-item>

              <!-- 添加薪资记录管理菜单 -->
              <el-menu-item index="/index/salary">
                <i class="el-icon-money"></i>
                <span slot="title">薪资管理</span>
              </el-menu-item>

              <!-- 添加培训记录管理菜单 -->
              <el-menu-item index="/index/training">
                <i class="el-icon-reading"></i>
                <span slot="title">培训管理</span>
              </el-menu-item>

              <!-- 添加档案借阅管理菜单 -->
              <el-menu-item index="/index/borrow">
                <i class="el-icon-document-copy"></i>
                <span slot="title">档案借阅</span>
              </el-menu-item>

              <!-- 添加合同统计管理菜单 -->
              <el-menu-item index="/index/contract-analysis">
                <i class="el-icon-data-analysis"></i>
                <span slot="title">合同统计</span>
              </el-menu-item>

            </el-submenu>




        </el-menu>

      </el-aside>
      <el-main>
        <!--路由视图-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
    export default {
        name: "Index",
        mounted() {
          //获取本地存储的数据并且赋值给name变量
          this.name = localStorage.getItem("name");
        },
      data(){
          return{
            name:"",  //用户名
            currentTab: 'register',
            registerForm: {
              username: '',
              password: '',
              email: ''
            },
            registerRules: {
              username: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
              ],
              password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
              ],
              email: [
                { required: true, message: '请输入邮箱', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
              ]
            }
          }
        },
        methods: {
          handleSelect(key, keyPath) {
            // 根据不同的路由路径发送不同的请求
            switch(key) {
              case '/index/salary':
                this.$http.get("/api/salary_records")
                  .then(response => {
                    if (response.data.code === 200) {
                      console.log('薪资数据获取成功');
                    }
                  });
                break;

              case '/index/training':
                this.$http.get("/api/training_records")
                  .then(response => {
                    if (response.data.code === 200) {
                      console.log('培训数据获取成功');
                    }
                  });
                break;

              case '/index/recruitment':
                this.$http.get("/api/recruitment_records")
                  .then(response => {
                    if (response.data.code === 200) {
                      console.log('招聘数据获取成功');
                    }
                  });
                break;

              case '/index/interview':
                this.$http.get("/api/interview_records")
                  .then(response => {
                    if (response.data.code === 200) {
                      console.log('面试数据获取成功');
                    }
                  });
                break;

              case '/index/transfer':
                this.$http.get("/api/employee_transfers")
                  .then(response => {
                    if (response.data.code === 200) {
                      console.log('调动数据获取成功');
                    }
                  });
                break;

              // 添加借阅管理的处理
              case '/index/borrow':
                this.$http.get("/api/file_borrow_records")
                  .then(response => {
                    if (response.data.code === 200) {
                      console.log('借阅数据获取成功');
                    }
                  });
                break;

              // ... 可以继续添加其他菜单项的处理 ...
            }
          },
          submitRegister(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.$http.post('/userInfo/addAdmin', this.registerForm)
                  .then(response => {
                    if (response.data.code === 200) {
                      this.$message.success('注册成功！');
                      this.resetForm('registerForm');
                    } else {
                      this.$message.error(response.data.msg || '注册失败');
                    }
                  })
                  .catch(error => {
                    this.$message.error('注册失败：' + error.message);
                  });
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          handleLogout() {
            this.$confirm('确认退出登录吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 清除本地存储的用户信息
              localStorage.clear(); // 清除所有本地存储

              // 跳转到登录页面，带上退出标记
              this.$router.push({
                path: '/login',
                query: { logout: 'true' }
              });

              this.$message({
                type: 'success',
                message: '已成功退出登录'
              });
            }).catch(() => {
              // 取消退出登录
            });
          }
        }
    }
</script>

<style scoped>
  @import url('../../assets/css/login.css');
  .el-aside,.el-container{
        height:100%;
  }
  .el-aside{
     border: 1px solid #b6b6b6;


  }
  .register-form {
    width: 400px;
    margin: 20px auto;
  }
</style>
